<template>
  <div>
    <!-- 内容页
        {{itemObj.nm}}
        <img :src="itemObj.img" alt="图片"/>
        {{id}} -->

    <div class="header">
      <Header1>{{ itemObj.nm }}</Header1>
      <Header2>{{ gouList.interestText }}</Header2>

      <div class="header3" :style="{ background: itemObj.backgroundColor }">
        <div class="item-img"><img :src="itemObj.img" alt="图片" /></div>
        <div class="item-text">
          <div>{{ itemObj.nm }}</div>
          <div>{{ itemObj.enm }}</div>
          <div>
            {{ itemObj.sc
            }}<span class="snoke"
              >({{ (itemObj.snum / 10000).toFixed(1) }}万人评)</span
            >
          </div>
          <div>{{ itemObj.cat }} <span>IMAX</span></div>
          <div>{{ itemObj.src }}/{{ itemObj.dur }}分钟</div>
          <div>{{ itemObj.pubDesc }}</div>
        </div>
        <div class="item-icon"><i class="iconfont icon-youjiantou1"></i></div>
      </div>
    </div>

    <div class="main">
      <van-tabs @click="getData">
        <van-tab
          v-for="(day, index) in dayList"
          :key="index"
          :title="day.date | format"
        >
        </van-tab>
      </van-tabs>
      <div class="nav2">
        <ul>
          <li>全城<i class="iconfont icon-xiala"></i></li>
          <li>品牌<i class="iconfont icon-xiala"></i></li>
          <li>特色<i class="iconfont icon-xiala"></i></li>
        </ul>
      </div>
      <div class="content">
        <ul>
          <li class="item_list" v-for="item in movies" :key="item.id">
            <div>
              {{ item.nm }}
              <div class="price-block">
                <span class="price">{{ item.sellPrice }}</span>
                <span class="after">元起</span>
              </div>
            </div>
            <div>{{ item.addr }}</div>
            <div class="text-p1">
              <div
                v-for="value in item.labels"
                :key="value.id"
                :style="{
                  border: '1px solid' + value.color,
                  color: value.color,
                }"
                class="cart"
              >
                {{ value.name }}
              </div>
            </div>

            <div v-if="item.promotion.cardPromotionTag != ''">
              <div class="ka">卡</div>
              {{ item.promotion.cardPromotionTag }}
            </div>
            <div>近期场次：{{ item.showTimes }}</div>
          </li>
          <!-- <li class="item_list">
                       <div>CGV影城（壹方城IMAX店）
                           <div class="price-block">
                               <span class="price">36</span>
                               <span class="after">元起</span>
                           </div>
                       </div>
                       <div>洪山区野芷湖西路16号创意剧场（保利心语）</div>
                  
                       <div>开卡特惠，首单1张最高立减3元</div>
                       <div>近期场次：21:20</div>
                   </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header1 from "../components/common/Header1.vue";
import Header2 from "../components/common/Header2.vue";
import axios from "axios";

export default {
  name: "Item",
  data: function () {
    return {
      id: 0,
      itemObj: {}, //内容页返回的数据是对象
      gouList: {},
      dayList: [], //今天，明天，后天
      movies: [],
    };
  },
  mounted() {
    // 获取到从列表页传过来的参数
    // console.log(this.$route.params.id);
    this.id = this.$route.params.id;

    // 获取内容页的数据
    axios
      .get(
        "/api/mtrade/mmdb/movie/v5/" +
          this.id +
          ".json?optimus_uuid=C2E81780155011ECB34C79BCA5547CBF56D804FD554E49BCB228EB987F285680&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        // console.log(res.data.data.movie);
        var data = res.data.data.movie;
        data.img = data.img.replace("w.h", "148.208");
        this.itemObj = data;
      });

    axios.get("/mtrade/bannerData.json").then((res) => {
      //   console.log(res.data.data.activityDynamic.server.cinema);
      this.gouList = res.data.data.activityDynamic.server.cinema;
    });
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=" +
          this.id +
          "&channelId=4&cityId=57"
      )
      .then((res) => {
        // console.log(res.data.data.dates);
        this.dayList = res.data.data.dates;
        this.getCinemaArr(this.dayList[0].date,this.id);
      });
  },
  components: {
    Header1,
    Header2,
  },
  methods: {
    getCinemaArr: function (data,ID) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId="+ID+"&serviceId=-1&stationId=-1&showDate=" +
            data +
            "&cityId=57&ci=57"
        )
        .then((res) => {
          //   console.log(res.data.data.cinemas);
          this.movies = res.data.data.cinemas;
        });
    },
    getData: function (name, title) {
      //   console.log(161, name, title);
         console.log(this.dayList[name].date);
      this.getCinemaArr(this.dayList[name].date,this.id);
    },
  },
  filters: {
    format(value) {
      var jintian = ["今天", "明天", "后天"];
      var str = "";
      var arr = value.split("-");
    //   console.log(arr);  
      //  将传过来过来的日期转化date的格式
      var d1 = new Date(value);
      // 获取当前的时间年月日
      var dd = new Date();
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var d2 = new Date(y + "-" + m + "-" + d);
      //   求今天明天后天
     var iday = parseInt(parseInt(d1-d2) / 1000 / 60 /60 /24);
    //  console.log(iday);
    // console.log(jintian[iday]);
    // 这是显示周几
    // console.log(d1.getDay());
    //  判断是不是今天明天后天，如果不是，按周几来显示
      if(jintian[iday] != undefined){
          str = jintian[iday]
      } else {
          str =`周${"日一二三四五六".charAt(d1.getDay())}`;
      }
      return str+arr[1]+"月"+ arr[2]+"日";
    },
  },
};
</script>
    
<style >
* {
  margin: 0;
  padding: 0;
}
.header {
  box-sizing: border-box;
  /* background: #fff; */
  background: #66292b;
  width: 100%;
  height: 298px;
}

.header3 {
  box-sizing: border-box;
  /* background: #fff; */
  /* background: #66292B; */
  width: 100%;
  height: 188px;
  display: flex;
  justify-content: space-around;
  padding: 17.5px 15px 17.5px 15px;
  /* border-bottom: 1px solid #ccc; */
}
.header3 .item-img {
  box-sizing: border-box;

  width: 33%;
}
.header3 .item-img img {
  width: 110px;
  height: 150px;
}
.header3 .item-text {
  color: #fff;
  text-indent: 25px;
  box-sizing: border-box;

  width: 55%;
}
.header3 .item-text div:nth-of-type(1) {
  color: #fff;
  font-size: 20px;
  margin-top: 2px;
  font-weight: 700;
}

.header3 .item-text div:nth-of-type(2) {
  color: #fff;
  font-size: 12px;
  margin-top: 10px;
  opacity: 0.8;
}
.header3 .item-text div:nth-of-type(3) {
  margin-top: 11px;
  font-size: 18px;
  font-weight: 700;
  color: #fc0;
}
.header3 .item-text div:nth-of-type(3) .snoke {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  color: #fff;
  opacity: 0.8;
}
.header3 .item-text div:nth-of-type(4) {
  margin-top: 8px;
  opacity: 0.8;
  color: #fff;

}

.header3 .item-text div:nth-of-type(4) span {
  display: inline-block;
  margin-left: 5px;
  text-indent: 0px;
  width: 42px;
  height: 13px;
  border: 1px solid #fff;
  text-align: center;
  vertical-align: top;
  opacity: 0.85;
}
.header3 .item-text div:nth-of-type(5) {
  margin-top: 8px;
  opacity: 0.8;
  color: #fff;

}

.header3 .item-text div:nth-of-type(6) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  opacity: 0.8;
  color: #fff;

}
.header3 .item-icon {
  box-sizing: border-box;

  line-height: 150px;
  text-align: center;

  width: 12%;
}
.header3 .item-icon .iconfont {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
}

.main .nav1,
.main .nav1 ul {
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  height: 46px;
  line-height: 46px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.main .nav1 li.dayActive {
  color: #f03d37;
  border-bottom: 2px solid #f03d37;
}
.main .nav2,
.main .nav2 ul {
  box-sizing: border-box;
  padding: 9px 0 10px 0px;
  background: #fff;
  width: 100%;
  height: 38px;
  line-height: 18px;
  display: flex;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.main .nav2 ul li {
  /* border: 1px solid red; */
  width: 125px;
  height: 20px;
  font-size: 14px;
  color: #666;
  border-right: 1px solid #ccc;
}
.main .nav2 ul li:nth-of-type(3) {
  border-right: 0;
}
.main .nav2 ul li .iconfont {
  font-size: 4px;
  margin-left: 4px;
}
.main .content ul .item_list {
  box-sizing: border-box;
  margin: 0 12px;
  background: #fff;
  width: 348px;
  height: 143px;

  border-bottom: 1px solid #ccc;

  /* border-bottom: 1px solid #ccc; */
}
.van-tabs__line {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    width: 70px;
    height: 3px;
    background-color: #ee0a24;
    border-radius: 3px;
}
.item_list div:nth-of-type(1) {
  margin-top: 10px;
  height: 23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
}
.item_list div:nth-of-type(1) .price-block {
  display: inline-block;
  padding-left: 3px;
  color: #f03d37;
  line-height: 1.5;
}
.item_list div:nth-of-type(1) .price-block .price {
  font-size: 18px;
}
.item_list div:nth-of-type(1) .price-block .after {
  padding-left: 3px;
  font-size: 11px;
}
.item_list div:nth-of-type(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 19px;
  font-size: 13px;
  color: #666;
}
.item_list .text-p1 {
  margin-top: 2px;
  padding-left: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 24px;

  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;

  /* border: 1px solid red; */
}
.item_list .text-p1 .cart {
  display: inline-block;
  margin-top: 0px;
  box-sizing: border-box;
  margin-left: 4px;
  border-radius: 1px;
  padding: 2px;
  font-size: 14px;
  height: 20px;
  text-align: center;
  line-height: 16px;
  border: 1px solid #ccc;
}
.item_list .text-p1 .cart:nth-child(1) {
  margin-left: -3px;
}
.item_list .text-p1 .cart:nth-child(2) {
  position: relative;
  top: 4px;
}
.item_list div:nth-of-type(4) {
  color: #999;
  margin-top: 5px;
  margin-bottom: 4px;
  height: 20px;
}
.item_list div:nth-of-type(4) .ka {
  margin-top: -2px;
  box-sizing: border-box;
  margin-right: 4px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #57c0f8;
  color: #fff;
  font-size: 12px;
  padding: 3px;
  border-radius: 2px;
  line-height: 12px;
  text-indent: -2px;
}

.item_list div:nth-of-type(5) {
  margin-top: -1px;
  padding: 0 15px 0 0;
  line-height: 1.5;
  font-size: 12px;
  color: #666;
}
.content ul .item_list:last-of-type {
  margin-bottom: 100px;
}
</style>